<template>
  <div class="app-container">
    <div class="container"></div>
    <div class="cover-image-container">
      <button class="start-btn" @click="startDialogue">走进自我关爱之旅</button>
    </div>

    <!-- 底部导航 -->
    <div class="bottom-nav">
      <div class="nav-item" @click="switchNav('home')">
        <i class="fas fa-home nav-icon"></i>
        <span class="nav-label">首页</span>
      </div>
      <div class="nav-item" @click="switchNav('record')">
        <i class="fas fa-chart-bar nav-icon"></i>
        <span class="nav-label">我的记录</span>
      </div>
      <div class="nav-item" @click="switchNav('resource')">
        <i class="fas fa-calendar-check nav-icon"></i>
        <span class="nav-label">预约咨询</span>
      </div>
    </div>
  </div>
</template>

<script>
import {
  startSurvey,
  partOneCalculation,
  nextPart,
  otherPartAnswerSave,
  checkPHQ9,
} from "@/api/CP";

export default {
  name: "DialogueSurvey",
  data() {
    return {
      currentSection: "pet-selection", // 'pet-selection', 'dialogue', 'result'
      currentNav: "home",
      loading: false,
      questions: [],
      currentIndex: 0,
      answers: {},
      startTime: "",
      parts: [],
      votelogId: null,
      currentPart: "initial",
      partIndex: 0,
      unitId: null,
      hasCheckedPHQ9: false,
      isSelecting: false,
      dialogues: [],
      showWelcome: true,
      inputAnswer: "",
      selectedPet: "fox", // 默认选择兜小狸
    };
  },
  computed: {
    currentQuestion() {
      return this.questions[this.currentIndex] || null;
    },
    isLastQuestion() {
      return this.currentIndex === this.questions.length - 1;
    },
    isLastPart() {
      return this.partIndex >= this.parts.length;
    },
    hasAnswerForCurrentQuestion() {
      if (!this.currentQuestion) return false;

      const answer = this.getAnswer(this.currentQuestion.id);

      // 多选题：至少选了一个
      if (this.currentQuestion.type === "checkbox") {
        return answer && answer.length > 0;
      }

      // 下拉题：若选择值为 "0"，视为未作答
      if (this.currentQuestion.type === "select") {
        return answer !== "" && answer !== "0";
      }

      // 其他类型：只要有值即可
      return !!answer;
    },
    hasCheckboxAnswer() {
      if (!this.currentQuestion || this.currentQuestion.type !== "checkbox")
        return false;
      const answer = this.getAnswer(this.currentQuestion.id);
      return answer && answer.length > 0;
    },
    progressWidth() {
      if (this.questions.length === 0) return "0%";
      return `${((this.currentIndex + 1) / this.questions.length) * 100}%`;
    },
    displayedDialogues() {
      return this.dialogues;
    },
    // 获取宠物图标
    petIcon() {
      // switch (this.selectedPet) {
      //   case "fox":
      //     return "fas fa-cat";
      //   case "rabbit":
      //     return "fas fa-paw";
      //   case "deer":
      //     return "fas fa-feather-alt";
      //   default:
      //     return "fas fa-heart";
      // }
    },
    // 获取宠物名称
    petName() {
      switch (this.selectedPet) {
        case "fox":
          return "兜小狸";
        case "rabbit":
          return "瑞小兔";
        case "deer":
          return "咪小鹿";
        default:
          return "小助手";
      }
    },
  },
  methods: {
    // 切换底部导航
    switchNav(nav) {
      this.currentNav = nav;
      // 在实际应用中，这里会切换到对应的页面
      if (nav === "home") {
        // 如果已经在首页，不做任何操作
        this.$router.push("/userHome");
      } else if (nav === "record") {
        this.$router.push("/CP/votelogList");
      } else if (nav === "resource") {
        this.$router.push("/appointment/list");
      }
    },

    // 获取答案
    getAnswer(questionId) {
      return this.answers[questionId];
    },

    // 检查checkbox选项是否被选中
    isCheckboxSelected(item) {
      const questionId = this.currentQuestion.id;
      const answer = this.answers[questionId];
      return answer && answer.includes(item.id);
    },

    // 切换checkbox选项
    toggleCheckboxOption(item) {
      const questionId = this.currentQuestion.id;

      if (!this.answers[questionId]) {
        this.$set(this.answers, questionId, []);
      }

      const currentAnswers = this.answers[questionId];
      const optionIndex = currentAnswers.indexOf(item.id);

      if (optionIndex > -1) {
        currentAnswers.splice(optionIndex, 1);
      } else {
        currentAnswers.push(item.id);
      }

      this.$set(this.answers, questionId, [...currentAnswers]);
    },

    // 选择选项（单选和下拉）
    selectOption(item) {
      if (this.isSelecting) return;

      this.isSelecting = true;
      this.$set(this.answers, this.currentQuestion.id, item.id);

      // 添加用户回答到对话历史
      this.addUserDialogue(item.name);

      setTimeout(() => {
        if (this.currentIndex < this.questions.length - 1) {
          this.currentIndex += 1;
          this.addSystemDialogue();
        } else {
          this.submitAnswers();
        }
        this.isSelecting = false;
      }, 500);
    },

    // 提交输入答案
    submitInputAnswer() {
      if (!this.inputAnswer.trim()) {
        this.$toast?.("请输入答案");
        return;
      }

      this.$set(this.answers, this.currentQuestion.id, this.inputAnswer);
      this.addUserDialogue(this.inputAnswer);

      setTimeout(() => {
        if (this.currentIndex < this.questions.length - 1) {
          this.currentIndex += 1;
          this.addSystemDialogue();
        } else {
          this.submitAnswers();
        }
        this.inputAnswer = "";
      }, 500);
    },

    // 提交多选题答案
    submitCheckboxAnswer() {
      if (!this.hasCheckboxAnswer) {
        this.$toast?.("请至少选择一个选项");
        return;
      }

      const selectedOptions = this.currentQuestion.item
        .filter((item) => this.isCheckboxSelected(item))
        .map((item) => item.name)
        .join("，");

      this.addUserDialogue(selectedOptions);

      setTimeout(() => {
        if (this.currentIndex < this.questions.length - 1) {
          this.currentIndex += 1;
          this.addSystemDialogue();
        } else {
          this.submitAnswers();
        }
      }, 500);
    },

    // 添加上下文标题（根据原问卷逻辑）
    addContextTitle() {
      const question = this.currentQuestion;
      if (!question) return;

      let title = "";

      if (question.subject === "1.\t您是否经常感到紧张?") {
        title = "最近一个月，您是否被以下问题困扰，选择最符合您情况的选项。";
      } else if (question.subject === "1.感觉紧张，焦虑或急切") {
        title = "一、在过去的两周里，你生活中以下症状出现的频率有多少？";
      } else if (question.subject === "1.做事时提不起劲或没有兴趣") {
        title = "二、在过去的两周里，你生活中以下症状出现的频率有多少？";
      } else if (question.subject === "1.容易烦恼和激动。") {
        title =
          "三、以下列出了有些人可能会有的问题，根据最近一周以内下述情况影响您的实际感觉，选择合适的选项。";
      } else if (
        question.subject === "1.\t近1个月，总体来说，您认为您的睡眠质量？ "
      ) {
        title = "五、请根据您的实际情况选择符合的选项。";
      } else if (
        question.subject === "1.因为一些无法预期的事情发生而感到心烦意乱。"
      ) {
        title = "六、最近[一个月]来，下列事情发生你身上的频率如何？";
      } else if (question.subject === "1.工作让我感觉身心俱惫。") {
        title = "五、请根据题目描述，选择最符合您当前情况的描述。";
      } else if (question.subject === "1.过去两周，我感觉快乐、心情舒畅。") {
        title = "六、请选择在过去两星期最接近您感觉的状态。";
      } else if (
        question.subject === "1.\t有过自伤行为（如用手打墙、摔东西） "
      ) {
        title = "最近半年，您有过下列行为吗？";
      }

      if (title && !this.dialogues.some((d) => d.text === title)) {
        this.dialogues.push({
          type: "system",
          text: title,
        });
      }
    },

    // 添加系统对话
    addSystemDialogue() {
      if (this.currentQuestion) {
        this.addContextTitle();
        this.dialogues.push({
          type: "system",
          text: this.currentQuestion.subject,
        });

        // 确保滚动到底部
        this.$nextTick(() => {
          this.scrollToBottom();
        });
      }
    },

    // 添加用户对话
    addUserDialogue(answerText) {
      this.dialogues.push({
        type: "user",
        text: answerText,
      });

      // 确保滚动到底部
      this.$nextTick(() => {
        this.scrollToBottom();
      });
    },

    // 滚动到对话底部
    scrollToBottom() {
      this.$nextTick(() => {
        const container = this.$refs.dialogueContainer;
        if (container) {
          // 使用setTimeout确保DOM更新完成
          setTimeout(() => {
            container.scrollTop = container.scrollHeight;
          }, 100);
        }
      });
    },

    // 上一题
    prevQuestion() {
      if (this.currentIndex > 0) {
        // 移除当前问题和答案的对话
        this.dialogues = this.dialogues.slice(0, -2);
        this.currentIndex -= 1;

        this.$nextTick(() => {
          this.scrollToBottom();
        });
      }
    },

    // 开始对话
    startDialogue() {
      this.$router.push("/userHome3");
    },

    // 从对话页面返回
    goBackFromDialogue() {
      if (confirm("确定要返回吗？您的测评进度将不会被保存。")) {
        this.resetSurvey();
        this.currentSection = "pet-selection";
      }
    },

    // 返回到对话页面
    goBackToDialogue() {
      this.currentSection = "dialogue";
    },

    // 重新开始测试
    restartSurvey() {
      this.resetSurvey();
      this.currentSection = "pet-selection";
    },

    // 重置调查
    resetSurvey() {
      this.questions = [];
      this.currentIndex = 0;
      this.answers = {};
      this.parts = [];
      this.votelogId = null;
      this.currentPart = "initial";
      this.partIndex = 0;
      this.hasCheckedPHQ9 = false;
      this.dialogues = [];
      this.showWelcome = true;
      this.inputAnswer = "";
    },

    // 查看报告
    viewReport() {
      if (this.votelogId) {
        this.$router.push({
          path: "/CP/Report",
          query: { votelogId: this.votelogId },
        });
      } else {
        this.$toast?.("无法查看报告，缺少必要参数");
      }
    },

    // 返回上一页
    goBack() {
      window.history.back();
    },

    // 查询是否做答第9部分的问卷
    getcheckPHQ9() {
      return new Promise((resolve, reject) => {
        checkPHQ9({
          votelogId: this.votelogId,
        })
          .then((res) => {
            if (res.code === 200) {
              resolve(res.data);
            } else {
              console.error("检查PHQ9失败:", res);
              reject(new Error(res.message || "检查PHQ9失败"));
            }
          })
          .catch((err) => {
            console.error("检查PHQ9异常:", err);
            reject(err);
          });
      });
    },

    // 获取初始调查
    getstartSurvey() {
      this.startTime = new Date().toISOString().replace("T", " ").split(".")[0];
      this.unitId = localStorage.getItem("unitId") || "defaultUnitId";

      startSurvey()
        .then((res) => {
          if (res.code === 200 && res.data) {
            this.questions = res.data;
            this.currentPart = "initial";
            this.initializeAnswers();

            // 添加第一个问题到对话
            setTimeout(() => {
              this.addSystemDialogue();
              this.showWelcome = false;
            }, 100);
          } else {
            console.error("获取题目失败:", res);
            this.$toast?.("获取题目失败，请重试");
          }
        })
        .catch((err) => {
          console.error("获取题目异常:", err);
          this.$toast?.("网络错误，请重试");
        })
        .finally(() => {
          this.loading = false;
        });
    },

    // 初始化答案
    initializeAnswers() {
      this.answers = {};
      this.questions.forEach((question) => {
        if (question.type === "checkbox") {
          this.$set(this.answers, question.id, []);
        } else {
          this.$set(this.answers, question.id, "");
        }
      });
    },

    // 提交答案
    submitAnswers() {
      if (!this.hasAnswerForCurrentQuestion) {
        this.$toast?.("请先完成当前题目");
        return;
      }

      // 构建答案数组
      const dataArr = this.questions.map((q) => {
        const answer = this.answers[q.id];

        if (q.type === "checkbox") {
          return Array.isArray(answer) ? answer.join(",") : "";
        }

        return answer === undefined || answer === null ? "" : String(answer);
      });

      console.log("提交数据:", dataArr);

      if (this.currentPart === "initial") {
        console.log("提交初始部分...");
        const userId = localStorage.getItem("userId") || "unknown";
        const payload = {
          userId,
          starttime: this.startTime,
          data: dataArr,
        };

        partOneCalculation(payload)
          .then((res) => {
            console.log("partOneCalculation返回:", res);
            if (res.code === 200 && res.data) {
              this.parts = res.data.parts || [];

              localStorage.setItem(
                "partOneScore",
                JSON.stringify(res.data.partOneScore)
              );
              this.votelogId = res.data.votelogId;

              console.log("下一部分列表:", this.parts);

              if (this.parts.length > 0) {
                this.startNextPart();
              } else {
                this.checkAndLoadPHQ9();
              }
            } else {
              console.error("partOneCalculation返回错误:", res);
              this.$toast?.("提交失败: " + (res.message || "未知错误"));
            }
          })
          .catch((err) => {
            console.error("partOneCalculation请求错误:", err);
            this.$toast?.("网络错误，请重试");
          });
      } else {
        console.log(`提交第${this.currentPart}部分...`);

        const payload = {
          part: this.currentPart,
          data: dataArr,
          unitId: localStorage.getItem("unitId"),
          userId: localStorage.getItem("userId"),
          votelogId: this.votelogId,
        };

        otherPartAnswerSave(payload)
          .then((res) => {
            console.log(`第${this.currentPart}部分保存结果:`, res);
            if (res.code === 200) {
              if (!this.isLastPart) {
                this.startNextPart();
              } else {
                this.checkAndLoadPHQ9();
              }
            } else {
              console.error("保存答案失败:", res);
              this.$toast?.("保存答案失败: " + (res.message || "未知错误"));
            }
          })
          .catch((err) => {
            console.error("保存答案请求错误:", err);
            this.$toast?.("网络错误，请重试");
          });
      }
    },

    // 检查并加载PHQ9问卷
    checkAndLoadPHQ9() {
      if (this.hasCheckedPHQ9) {
        this.questions = [];
        this.currentSection = "result";
        this.$toast?.("所有部分答题完成！");
        return;
      }

      console.log("检查是否需要做第9部分问卷...");
      this.hasCheckedPHQ9 = true;

      this.getcheckPHQ9()
        .then((needPHQ9) => {
          if (needPHQ9) {
            console.log("需要做第9部分问卷");
            this.loadPHQ9Part();
          } else {
            console.log("不需要做第9部分问卷");
            this.questions = [];
            this.currentSection = "result";
            this.$toast?.("所有部分答题完成！");
          }
        })
        .catch((err) => {
          console.error("检查PHQ9失败:", err);
          this.$toast?.("检查失败，直接结束答题");
          this.questions = [];
          this.currentSection = "result";
        });
    },

    // 加载第9部分问卷
    loadPHQ9Part() {
      console.log("开始获取第9部分题目");
      this.loading = true;

      nextPart({ part: 9 })
        .then((res) => {
          console.log("第9部分返回:", res);
          if (res.code === 200 && res.data) {
            this.questions = res.data;
            this.currentIndex = 0;
            this.currentPart = 9;
            this.initializeAnswers();
            this.dialogues = [];
            this.addSystemDialogue();
            console.log(`第9部分题目加载成功，共${res.data.length}题`);
          } else {
            console.error("获取第9部分失败:", res);
            this.$toast?.("加载第9部分题目失败");
            this.questions = [];
            this.currentSection = "result";
          }
        })
        .catch((err) => {
          console.error("获取第9部分异常:", err);
          this.$toast?.("网络错误，请重试");
          this.questions = [];
          this.currentSection = "result";
        })
        .finally(() => {
          this.loading = false;
        });
    },

    // 开始下一部分
    startNextPart() {
      if (this.partIndex < this.parts.length) {
        const nextPartNumber = this.parts[this.partIndex];
        this.currentPart = nextPartNumber;

        console.log(`开始获取第${nextPartNumber}部分题目`);

        this.loading = true;
        nextPart({ part: nextPartNumber })
          .then((res) => {
            console.log(`第${nextPartNumber}部分返回:`, res);
            if (res.code === 200 && res.data) {
              this.questions = res.data;
              this.currentIndex = 0;
              this.initializeAnswers();
              this.partIndex += 1;
              this.dialogues = [];
              this.addSystemDialogue();

              console.log(
                `第${nextPartNumber}部分题目加载成功，共${res.data.length}题`
              );
            } else {
              console.error(`获取第${nextPartNumber}部分失败:`, res);
              this.$toast?.("加载题目失败: " + (res.message || "未知错误"));
            }
          })
          .catch((err) => {
            console.error(`获取第${nextPartNumber}部分异常:`, err);
            this.$toast?.("网络错误，请重试");
          })
          .finally(() => {
            this.loading = false;
          });
      }
    },
  },
  mounted() {
    // 初始化时滚动到底部
    this.$nextTick(() => {
      this.scrollToBottom();
    });
  },
};
</script>

<style scoped>
/* 使用之前对话页面的样式，添加一些针对问卷的调整 */

.app-container {
  background-color: #f8f9fa;
  color: #333;
  line-height: 1.6;
  margin: 0 auto;
  min-height: 100vh;
  position: relative;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
  width: 100%;
  height: 100%;

  background-image: url("https://lesson.iapeap.com/DRM/IMG/IMG20251120172814.jpg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center 0; /* 图片居中 */
  background-color: transparent;

  /* 添加阴影效果，增强视觉层次 */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);

  /* 添加圆角使过渡更自然 */
  border-radius: 8px;
}

/* 封面页面样式 */
.cover-section {
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  align-items: center;
}

.cover-image-container {
  position: absolute;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  bottom: 15%;
}

.cover-image {
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.start-btn {
  position: absolute;
  bottom: 20%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #fff;
  color: #7aab8b;
  border: none;
  border-radius: 25px;
  padding: 10px 10px;
  box-sizing: border-box;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  box-shadow: 0 6px 15px rgba(139, 189, 156, 0.4);
  /* min-width: 180px; */
}

.start-btn:hover {
  background-color: #fff;
  transform: translateX(-50%) translateY(-2px);
  box-shadow: 0 8px 20px rgba(139, 189, 156, 0.5);
}

.start-btn:active {
  transform: translateX(-50%) translateY(0);
}

/* 对话页面样式 */
.dialogue-section {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0 20px;
  box-sizing: border-box;
}

.dialogue-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.back-btn {
  background: none;
  border: none;
  font-size: 20px;
  color: #5a7c65;
  cursor: pointer;
  padding: 8px;
  box-sizing: border-box;

  border-radius: 50%;
  transition: background-color 0.2s ease;
}

.back-btn:hover {
  background-color: rgba(139, 189, 156, 0.1);
}

.progress-bar {
  height: 6px;
  background-color: #e0e0e0;
  border-radius: 3px;
  margin: 20px 0 30px;
  overflow: hidden;
  flex: 1;
  margin-left: 15px;
}

.progress {
  height: 100%;
  background-color: #8bbd9c;
  width: 0%;
  transition: width 0.5s ease;
}

.dialogue-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
  overflow-y: auto;
  padding-bottom: 10px;
  max-height: 30vh;
}

.dialogue-bubble {
  max-width: 85%;
  padding: 14px 18px;
  box-sizing: border-box;
  border-radius: 18px;
  margin-bottom: 16px;
  position: relative;
  line-height: 1.5;
  animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.pet-dialogue {
  align-self: flex-start;
  background-color: #f0f7f2;
  color: #333;
  border-top-left-radius: 4px;
}

.user-option {
  align-self: flex-end;
  background-color: #8bbd9c;
  color: white;
  border-top-right-radius: 4px;
}

.pet-avatar {
  background-image: url("https://lesson.iapeap.com/DRM/IMG/IMG20251120172802%20%281%29.png");
  background-size: 100% 100%;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #e0f0e5;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  color: #5a7c65;
  font-size: 20px;
}

.dialogue-row {
  display: flex;
  margin-bottom: 16px;
}

.dialogue-row.user {
  justify-content: flex-end;
}

.options-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 10px;
}

.option {
  background-color: white;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 10px;
  box-sizing: border-box;

  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
}

.option:hover {
  border-color: #8bbd9c;
  background-color: rgba(139, 189, 156, 0.05);
}

.option.selected {
  border-color: #8bbd9c;
  background-color: rgba(139, 189, 156, 0.1);
}

.option-text {
  font-size: 16px;
  color: #444;
}

.input-container {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.custom-input {
  flex: 1;
  padding: 12px 16px;
  box-sizing: border-box;

  border: 1px solid #e0e0e0;
  border-radius: 12px;
  font-size: 16px;
  outline: none;
  transition: border-color 0.2s;
}

.custom-input:focus {
  border-color: #8bbd9c;
}

.submit-input-btn,
.submit-checkbox-btn {
  padding: 12px 20px;
  box-sizing: border-box;

  margin-top: 0;
}

.checkbox-container {
  margin-top: 10px;
}

.checkbox-option {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  box-sizing: border-box;

  background-color: white;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.checkbox-option:hover {
  border-color: #8bbd9c;
  background-color: rgba(139, 189, 156, 0.05);
}

.checkbox-option.selected {
  border-color: #8bbd9c;
  background-color: rgba(139, 189, 156, 0.1);
}

.checkbox-indicator {
  margin-right: 12px;
}

.checkbox-square {
  width: 20px;
  height: 20px;
  border: 2px solid #8bbd9c;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
}

.checkbox-option.selected .checkbox-square {
  background-color: #8bbd9c;
}

.checkmark {
  color: white;
  font-weight: bold;
  font-size: 14px;
}

.checkbox-text {
  font-size: 16px;
  color: #444;
}

.nav-buttons {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.nav-buttons .btn {
  flex: 1;
  margin-top: 0;
}

.btn {
  background-color: #8bbd9c;
  color: white;
  border: none;
  border-radius: 12px;
  padding: 16px 24px;
  box-sizing: border-box;

  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  box-shadow: 0 4px 8px rgba(139, 189, 156, 0.3);
}

.btn:hover {
  background-color: #7aab8b;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(139, 189, 156, 0.4);
}

.btn:active {
  transform: translateY(0);
}

.btn:disabled {
  background-color: #ccc;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.btn-secondary {
  background-color: #f0f0f0;
  color: #666;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.btn-secondary:hover {
  background-color: #e0e0e0;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

/* 结果页面样式 */
.result-section {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-align: center;
}

.result-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.result-icon {
  font-size: 80px;
  color: #8bbd9c;
  margin: 30px 0 20px;
}

.result-title {
  font-size: 24px;
  font-weight: 700;
  color: #5a7c65;
  margin-bottom: 16px;
}

.result-description {
  font-size: 16px;
  color: #666;
  line-height: 1.6;
  margin-bottom: 30px;
}

.result-details {
  background-color: white;
  border-radius: 16px;
  box-sizing: border-box;
  padding: 20px;
  margin-bottom: 30px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  text-align: left;
}

.result-details h3 {
  font-size: 18px;
  color: #5a7c65;
  margin-bottom: 12px;
}

.result-details p {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

.action-buttons {
  display: flex;
  gap: 12px;
}

/* 底部导航 */
.bottom-nav {
  position: absolute;
  width: 100%;
  bottom: 0;
  background-color: white;
  box-sizing: border-box;
  display: flex;
  justify-content: space-around;
  border-top: 1px solid #f0f0f0;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  padding: 8px 16px;
  box-sizing: border-box;

  border-radius: 12px;
  transition: all 0.2s ease;
}

.nav-icon {
  font-size: 20px;
  color: #888;
  margin-bottom: 4px;
}

.nav-item.active .nav-icon {
  color: #8bbd9c;
}

.nav-label {
  font-size: 12px;
  color: #888;
}

.nav-item.active .nav-label {
  color: #8bbd9c;
  font-weight: 500;
}

/* 加载状态 */
.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

.loading-spinner {
  width: 45px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #8bbd9c;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 15px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.loading-overlay p {
  color: #666;
  font-size: 16px;
}

/* 响应式调整 */
@media (max-width: 375px) {
  .dialogue-bubble {
    max-width: 90%;
  }

  .start-btn {
    padding: 12px 22px;
    box-sizing: border-box;
    font-size: 14px;
    /* min-width: 160px; */
  }
}
</style>
